<template>
<!-- 给当前组织架构添加加载进度条v-loading="loading" -->
  <div  v-loading="loading" class="dashboard-container">
    <div class="app-container">
      <!-- element行列布局 el-row行,col列-->
       <el-card class="tree-card">
        <el-tabs>
          <el-tab-pane label="组织架构" class="tree-card">
         
        <!-- element的tree组件 中: props:配置选项 data:展示数据 default-expand-all是否默认展开所有节点-->
        <!-- 头部 -->
        <!-- 简化 -->
       <tree-tools :tree-node="company" :is-root="true" @addDepts="addDepts" style="font-weight:bold;border-bottom:1px solid #cfcfcf"></tree-tools>
             <!--放置一个属性   这里的props和我们之前学习的父传子 的props没关系-->
          <el-tree :data="departs" :props="defaultProps" :default-expand-all="true">
          <!-- 传入内容 插槽内容 会循环多次 有多少节点 就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据   data 每个节点的数据对象-->
        
           <!-- 简化 -->
           <!-- :tree-node="data"z中有id -->
           <tree-tools slot-scope="{ data }" :tree-node="data" @delDepts="getDepartments" @addDepts="addDepts" @editDepts="editDepts" />
           <!-- 父组件绑定@delDepts事件，删除后刷新调用 -->
         
         </el-tree>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </div>

 <!-- 放置新增弹层组件  :tree-node="node"传值用的 sync修饰符关闭新增弹层-->
          <add-dept ref="addDept" :show-dialog.sync="showDialog" :tree-node="node" @addDepts="getDepartments"/>   

  </div>
</template>

<script>

import TreeTools from "./components/tree-tools"
import AddDept from './components/add-dept'
import { getDepartments} from '@/api/department'
import { transListToTreeData } from "@/utils/index"


export default {
   components:{
    TreeTools,
    AddDept
},
     data() {
      return {
        loading: false, // 用来控制进度弹层的显示和隐藏
        node: null, //当前节点
        showDialog: false, // 显示窗体
        company: { }, // 就是头部的数据结构
        departs: [],
        // 定义数据模型
        defaultProps: {
          label: 'name' //指定节点的标签名称 从这个属性显示内容--tree组件需要
        }
      }
    },
  created() {
    this.getDepartments() // 调用自身的方法
  },

  methods: {
      // 将列表型的数据，转化成树形数据，递归算法--uitls-index.js封装
      async getDepartments() {
        this.loading = true
        const result = await getDepartments()
        this.company = { name: result.companyName, manager: '负责人',id:'' }  //由于treenode属性中没有id,但是查找中node我们加了id
        this.departs = transListToTreeData(result.depts, '') //result.depts // 需要将其转化成树形结构,看api文档depts
        // console.log(result)
        this.loading = false
      },
      addDepts(node) {
        this.showDialog = true // 显示弹层
        // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
        this.node = node
      },
      // 点击编辑触发的父组件的方法
      editDepts(node) {
        this.showDialog = true // 显示新增组件弹层
        this.node = node // 存储传递过来的node数据
        // 父组件 调用子组件的方法refs!  通信父传递子 $refs
        this.$refs.addDept.getDepartDetail(node.id) // 直接调用子组件中的方法 传入一个id
      }
  }
}

</script>

<style scoped>
.tree-card {
  padding: 30px  140px;
  font-size:14px;
}
</style>